<template>
  <div class="filters">
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">
        单程：
        广州 - 上海
        /
        2019-06-17
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="runFilters">
          <el-option
            v-for="(item, index) in options.airport"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="runFilters">
          <!-- 对于起飞时间的 value 值其实并非固定,
                    最终要飞机起飞时间大于 from 小于 to 才能放行
                    最终是由我们自己进行比较和筛选
                    这里的 value 可以我们自己定义格式
                    只要后面的筛选按照这个格式去用就可以了
          如 6,12-->
          <el-option
            v-for="(item,index) in options.flightTimes"
            :key="index"
            :label="`${item.from}:00 - ${item.to}:00`"
            :value="`${item.from},${item.to}`"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="runFilters">
          <el-option
            v-for="(item, index) in options.company"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airSize" placeholder="机型" @change="runFilters">
          <el-option
            v-for="(item, index) in planeSize"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Object,
    flights: Array
  },
  data() {
    return {
      airport: '', // 机场
      flightTimes: '', // 出发时间
      company: '', // 航空公司
      airSize: '', // 机型大小
      planeSize: [
        {
          label: '大',
          value: 'L'
        },
        {
          label: '中',
          value: 'M'
        },
        {
          label: '小',
          value: 'S'
        }
      ]
    }
  },
  methods: {
    runFilters() {
      // 复制原来100条数据
      let newList = [...this.flights]

      if (this.airport) {
        newList = newList.filter(el => {
          return el.org_airport_name == this.airport
        })
      }

      if (this.flightTimes) {
        newList = newList.filter(el => {
          const planeTime = Number(el.dep_time.split(':')[0])
          const from = Number(this.flightTimes.split(',')[0])
          const to = Number(this.flightTimes.split(',')[1])
          return planeTime >= from && planeTime < to
        })
      }

      if (this.company) {
        newList = newList.filter(el => {
          return el.airline_name == this.company
        })
      }

      if (this.airSize) {
        newList = newList.filter(el => {
          return el.plane_size == this.airSize
        })
      }

      this.$emit('setFlightsList', newList)
    },

    // 撤销条件时候触发
    handleFiltersCancel() {
      this.airport = '' // 机场
      this.flightTimes = '' // 出发时间
      this.company = '' // 航空公司
      this.airSize = ''
      this.runFilters()
    }
  }
}
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>